<template>
<div class="lottery-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">等级佣金比例</div>
        <div class="wlm-form-content">
            <el-form ref="active" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                <el-form-item label="等级权重">
                    <el-radio-group v-model="formFormatData.formData.leave" class="leverl-radio" size="small">
                        <el-radio :label="1" :disabled="levelDisabled(1)" border>一级</el-radio>
                        <el-radio :label="2" :disabled="levelDisabled(2)" border>二级</el-radio>
                        <el-radio :label="3" :disabled="levelDisabled(3)" border>三级</el-radio>
                        <el-radio :label="4" :disabled="levelDisabled(4)" border>四级</el-radio>
                        <el-radio :label="5" :disabled="levelDisabled(5)" border>五级</el-radio>
                    </el-radio-group>
                    <div></div>
                    <el-radio-group style="margin-top:10px;" v-model="formFormatData.formData.leave" class="leverl-radio" size="small">
                        <el-radio :label="6" :disabled="levelDisabled(6)" border>六级</el-radio>
                        <el-radio :label="7" :disabled="levelDisabled(7)" border>七级</el-radio>
                        <el-radio :label="8" :disabled="levelDisabled(8)" border>八级</el-radio>
                        <el-radio :label="9" :disabled="levelDisabled(9)" border>九级</el-radio>
                        <el-radio :label="10" :disabled="levelDisabled(10)" border>十级</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="等级名称" prop="leave_title">
                    <el-input :maxlength="10" v-model.trim="formFormatData.formData.leave_title">
                    </el-input>
                </el-form-item>
                <el-form-item label="一级佣金比例" prop="leave_commission_1">
                    <el-input  v-model="formFormatData.formData.leave_commission_1">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="二级佣金比例" prop="leave_commission_2" v-if="commission_level==2||commission_level==3">
                    <el-input  v-model="formFormatData.formData.leave_commission_2">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="三级佣金比例" prop="leave_commission_3" v-if="commission_level==3">
                    <el-input  v-model="formFormatData.formData.leave_commission_3">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="当前等级提现手续费">
                    <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                        <el-input-number :controls="false" :min="-1" :max="100" v-model="formFormatData.formData.commission_leave"></el-input-number>
                        <div class="wlm-input-append append-right">%</div>
                    </div>
                    <p class="form-help">不填则使用默认提现手续费，填-1表示当前等级免手续费</p>
                </el-form-item>
                <el-form-item label="当前等级最低提现金额">
                    <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                        <el-input-number :controls="false" :min="0" v-model="formFormatData.formData.min_money"></el-input-number>
                        <div class="wlm-input-append append-right">元</div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="wlm-form">
        <div class="wlm-form-header">添加升级条件</div>
        <div class="wlm-form-content">
            <el-form ref="rd" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                <el-form-item label="升级方式">
                    <el-radio-group v-model="formFormatData.formData.leave_type">
                        <el-radio :label="1">满足以下任意条件</el-radio>
                        <el-radio :label="2">满足以下全部条件</el-radio>
                    </el-radio-group>

                    <el-checkbox-group v-model="formFormatData.formData.selected" @change="selectedChange" style="margin-top:18px;" class="leverl-checkbox" size="small">
                        <el-checkbox label="order_money" border>分销订单总额</el-checkbox>
                        <el-checkbox label="order_count" border>分销订单总数</el-checkbox>
                        <el-checkbox label="order_money_1" border>一级分销订单总额</el-checkbox>
                        <el-checkbox label="order_count_1" border>一级分销订单总数</el-checkbox>
                        <el-checkbox label="self_order_mone" border>自购订单总额</el-checkbox>
                        <el-checkbox label="self_order_count" border>自购订单总数</el-checkbox>
                        <el-checkbox label="child_count" border>下线人数</el-checkbox>
                        <el-checkbox label="child_agent_count" border>下线分销商人数</el-checkbox>
                        <el-checkbox label="child_count_1" border>一级下线人数</el-checkbox>
                        <el-checkbox label="child_agent_count_1" border>一级下线分销商</el-checkbox>
                        <el-checkbox label="goods_ids" border>购买指定商品</el-checkbox>
                        <el-checkbox label="withdraw_money" border>已提现佣金金额</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="wlm-form" v-show="formFormatData.formData.selected.length>0">
        <div class="wlm-form-header">升级条件限制</div>
        <div class="wlm-form-content">
            <el-form ref="info" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                <el-form-item v-if="formFormatData.formData.selected.includes('order_money')" label="分销订单总额" prop="order_money">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'order_money',0.01)" :controls="false" :min="0" v-model="formFormatData.formData.order_money"></el-input-number>
                            <div class="wlm-input-append append-right">元</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('order_money')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有已付款的分销订单总金额</p>
                </el-form-item>

                <el-form-item v-if="formFormatData.formData.selected.includes('order_count')" label="分销订单总数" prop="order_count">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'order_count')" :controls="false" :min="0" v-model="formFormatData.formData.order_count"></el-input-number>
                            <div class="wlm-input-append append-right">个</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('order_count')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有已付款的分销订单总订单数</p>
                </el-form-item>
                <el-form-item v-if="formFormatData.formData.selected.includes('order_money_1')" label="一级分销订单总额" prop="order_money_1">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'order_money_1',0.01)" :controls="false" :min="0" v-model="formFormatData.formData.order_money_1"></el-input-number>
                            <div class="wlm-input-append append-right">元</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('order_money_1')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有一级分销商的已付款分销订单总金额</p>
                </el-form-item>
                <el-form-item v-if="formFormatData.formData.selected.includes('order_count_1')" label="一级分销订单总数" prop="order_count_1">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'order_count_1')" :controls="false" :min="0" v-model="formFormatData.formData.order_count_1"></el-input-number>
                            <div class="wlm-input-append append-right">个</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('order_count_1')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有一级分销商的已付款分销订单总订单数</p>
                </el-form-item>
                <el-form-item v-if="formFormatData.formData.selected.includes('self_order_mone')" label="自购订单总额" prop="self_order_mone">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'self_order_mone',0.01)" :controls="false" :min="0" v-model="formFormatData.formData.self_order_mone"></el-input-number>
                            <div class="wlm-input-append append-right">元</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('self_order_mone')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有已付款的订单总金额</p>
                </el-form-item>
                <el-form-item v-if="formFormatData.formData.selected.includes('self_order_count')" label="自购订单总数" prop="self_order_count">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'self_order_count')" :controls="false" :min="0" v-model="formFormatData.formData.self_order_count"></el-input-number>
                            <div class="wlm-input-append append-right">个</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('self_order_count')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有已付款的订单总订单数</p>
                </el-form-item>
                <el-form-item v-if="formFormatData.formData.selected.includes('child_count')" label="下线人数" prop="child_count">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'child_count')" :controls="false" :min="0" v-model="formFormatData.formData.child_count"></el-input-number>
                            <div class="wlm-input-append append-right">人</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('child_count')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有直系下线与下级分销商总人数（不包含下级分销商的直系下线）</p>
                </el-form-item>
                <el-form-item v-if="formFormatData.formData.selected.includes('child_agent_count')" label="下线分销商人数" prop="child_agent_count">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'child_agent_count')" :controls="false" :min="0" v-model="formFormatData.formData.child_agent_count"></el-input-number>
                            <div class="wlm-input-append append-right">人</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('child_agent_count')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有下级分销商总人数（不包含当前用户的直系下线与下级分销商的直系下线）</p>
                </el-form-item>
                <el-form-item v-if="formFormatData.formData.selected.includes('child_count_1')" label="一级下线人数" prop="child_count_1">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'child_count_1')" :controls="false" :min="0" v-model="formFormatData.formData.child_count_1"></el-input-number>
                            <div class="wlm-input-append append-right">人</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('child_count_1')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有一级分销商的直系下线与所有下级分销商总人数（不包含一级分销商的一级分销商的直系下线）</p>
                </el-form-item>
                <el-form-item v-if="formFormatData.formData.selected.includes('child_agent_count_1')" label="一级下线分销商" prop="child_agent_count_1">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'child_agent_count_1')" :controls="false" :min="0" v-model="formFormatData.formData.child_agent_count_1"></el-input-number>
                            <div class="wlm-input-append append-right">人</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('child_agent_count_1')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户所有一级分销商的所有下级分销商总人数（不包含一级分销商的直系下线与一级分销商的一级分销商的直系下线）</p>
                </el-form-item>

                <el-form-item v-if="formFormatData.formData.selected.includes('goods_ids')" label="指定商品">
                    <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="filtersChange"></choose-goods>
                    <el-button type="primary" @click="goodsToogle">添加商品</el-button>
                    <el-button type="text" @click="deleteArr('goods_ids')">删除</el-button>
                    <p class="form-help">当前用户购买指定商品中的任意一个商品</p>
                    <el-table v-if="formFormatData.formData.goods_ids!=''" :data="formFormatData.formData.goods_ids" style="width: 60%;margin-top:10px;">
                        <el-table-column prop="date" label="商品" min-width="100">
                            <template slot-scope="scope">
                                <div class="flex-row">
                                    <img class="logo" v-if="scope.row.image && scope.row.image" :src="scope.row.image[0]['file_path']">
                                    <div class="inner-text" style="width: 0;flex-grow: 1;">
                                        <p>{{scope.row.goods_name}}</p>
                                        <span>￥:{{scope.row.goods_price}}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="总库存" min-width="40">
                            <template slot-scope="scope">
                                <p>{{scope.row.stock_num}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <div class="operation-group">
                                    <el-button class="wlm-text" type="text" @click="deleteTable(scope)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>

                <el-form-item v-if="formFormatData.formData.selected.includes('withdraw_money')" label="已提现佣金金额" prop="withdraw_money">
                    <div class="flex-row">
                        <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                            <el-input-number @change="newGiftChange(formFormatData.formData,'withdraw_money',0.01)" :controls="false" :min="0" v-model="formFormatData.formData.withdraw_money"></el-input-number>
                            <div class="wlm-input-append append-right">元</div>
                        </div>
                        <el-button style="margin-left:63px;" @click="deleteArr('withdraw_money')" type="text">删除</el-button>
                    </div>
                    <p class="form-help">当前用户已提现成功的总金额</p>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveForm" type="primary">保存</el-button>
        <router-link tag="span" to="/distribution/distributorLevel">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import ChooseGoods from '@/components/ChooseGoods/index'
import {
  dealerLeaveAddEdit,
  dealerLeaveDetail,
  issetLeave,
  LeaveList
} from '@/api/distribution'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'LotteryAdd',
  components: {
    ChooseGoods
  },
  computed: {
    levelDisabled() {
      return function(val) {
        return this.levelSelectData.includes(val) && this.formFormatData.formData.leave !== val
      }
    }
  },
  created() {
    issetLeave().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.levelSelectData = msgData
      const index = this.levelSelectData.findIndex(item => {
        return item === this.formFormatData.formData.leave
      })
      if (index !== -1) {
        this.levelSelectData.splice(index, 1)
      }
    })
    LeaveList().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.commission_level = msgData.commission_level
    })
  },
  data() {
    return {
      levelSelectData: [],
      commission_level: '',
      luck: { luckTitle: '' },
      luck_title: '',
      $index: -1,
      $lineIndex: -1,
      formType: '1',
      ueditorList: [],
      currentRow: [],
      defaultMsg: '',
      chooseGoodsConfig: {
        type: ['chooseGoods'],
        model: 'normal',
        initList: []
      },
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 10,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img',
          validateField: 'merchantlog'
        }
      },
      chooseData: [],
      formFormatData: {
        key: ['active', 'rd', 'info'],
        api: {
          editForm: {
            api: dealerLeaveDetail,
            params: {
              id: ''
            },
            redirect: 'leave_id'
          },
          submitForm: dealerLeaveAddEdit
        },
        formData: {
          selected: [],
          leave: '',
          leave_commission_1: '',
          leave_commission_2: '',
          leave_commission_3: '',
          commission_leave: '',
          min_money: '',
          leave_title: '',
          leave_type: 1,
          order_money: '',
          order_count: '',
          order_money_1: '',
          order_count_1: '',
          self_order_mone: '',
          self_order_count: '',
          child_count: '',
          child_agent_count: '',
          child_count_1: '',
          child_agent_count_1: '',
          withdraw_money: '',
          goods_ids: []
        },
        rules: {
          leave_title: [{
            message: '请填写等级名称',
            required: true,
            trigger: 'change'
          }],
          leave_commission_1: [{
            message: '请填写一级佣金比例',
            required: true,
            trigger: 'change'
          }],
          leave_commission_2: [{
            message: '请填写二级佣金比例',
            required: true,
            trigger: 'change'
          }],
          leave_commission_3: [{
            message: '请填写三级佣金比例',
            required: true,
            trigger: 'change'
          }],
          order_money: [{
            message: '请填写分销订单总额',
            required: true,
            trigger: 'change'
          }],
          order_count: [{
            message: '请填写分销订单总数',
            required: true,
            trigger: 'change'
          }],
          order_money_1: [{
            message: '请填写一级分销订单总额',
            required: true,
            trigger: 'change'
          }],
          order_count_1: [{
            message: '请填写一级分销订单总数',
            required: true,
            trigger: 'change'
          }],
          self_order_mone: [{
            message: '请填写自购订单总额',
            required: true,
            trigger: 'change'
          }],
          self_order_count: [{
            message: '请填写自购订单总数',
            required: true,
            trigger: 'change'
          }],
          child_count: [{
            message: '请填写下线人数',
            required: true,
            trigger: 'change'
          }],
          child_agent_count: [{
            message: '请填写下线分销商人数',
            required: true,
            trigger: 'change'
          }],
          child_count_1: [{
            message: '请填写一级下线人数',
            required: true,
            trigger: 'change'
          }],
          child_agent_count_1: [{
            message: '请填写一级下线分销商人数',
            required: true,
            trigger: 'change'
          }],
          withdraw_money: [{
            message: '请填写已提现佣金金额',
            required: true,
            trigger: 'change'
          }]
          // goods: [{
          //   message: '请选择活动商品',
          //   required: true,
          //   validator: checkGoods,
          //   trigger: 'change'
          // }]
        }
      }
    }
  },
  methods: {
    deleteArr(val) {
      const findtip = this.formFormatData.formData.selected.findIndex((find) => {
        return [find].includes(val)
      })
      this.formFormatData.formData.selected.splice(findtip, 1)
      if (val === 'goods_ids') {
        this.formFormatData.formData[`${val}`] = []
      } else {
        this.formFormatData.formData[`${val}`] = ''
      }
    },
    selectedChange(val) {
      const allSelected = ['order_money', 'order_count', 'order_money_1', 'order_count_1', 'self_order_mone', 'self_order_count', 'child_count', 'child_agent_count', 'child_count_1', 'child_agent_count_1', 'goods_ids', 'withdraw_money']
      allSelected.map(item => {
        if (!val.includes(item)) {
          if (item === 'goods_ids') {
            this.formFormatData.formData[`${item}`] = []
          } else {
            this.formFormatData.formData[`${item}`] = ''
          }
        }
      })
    },
    saveForm() {
      if (this.formFormatData.formData.selected.length === 0) {
        this.$message({
          message: '请选择条件',
          type: 'error'
        })
      } else {
        if (this.formFormatData.formData.selected.includes('goods_ids')) {
          if (this.formFormatData.formData.goods_ids.length === 0) {
            this.$message({
              message: '请添加指定商品',
              type: 'error'
            })
          } else {
            const result = []
            this.formFormatData.formData.goods_ids.map(item => {
              result.push(item.goods_id)
            })
            console.log(result)
            this.formFormatData.formData.goods_ids = result
            this.formFormatSubmit({ router: { type: 'replace', path: '/distribution/distributorLevel', code: 1 } })
          }
        } else {
          this.formFormatSubmit({ router: { type: 'replace', path: '/distribution/distributorLevel', code: 1 } })
        }
      }
    },
    filtersChange(val) {
      this.currentRow = val.currentRow
      const displayData = val.displayData
      const result = []
      displayData.map(item => {
        const newData = this.formFormatData.formData.goods_ids.findIndex(goodsItem => {
          return `${goodsItem.goods_id}` === `${item.goods_id}`
        })
        if (newData === -1) {
          result.push({ image: [{ file_path: item.image[0]['file_path'] }], goods_name: item.goods_name, goods_id: item.goods_id, stock_num: item.stock, goods_price: item.goods_min_price })
        }
      })

      this.formFormatData.formData.goods_ids = [...this.formFormatData.formData.goods_ids, ...result]
    },
    goodsToogle() {
      const result = []
      this.formFormatData.formData.goods_ids.map(item => {
        result.push(item.goods_id)
      })
      this.$refs.chooseGoods.currentRow = result
      this.$refs.chooseGoods.toggle()
    },
    deleteTable(scope) {
      this.formFormatData.formData.goods_ids.splice(scope.$index, 1)
      this.currentRow.splice(scope.$index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.lottery-add {
    .logo {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
    }

    // /deep/ .envelope-input-number .el-input-number {
    //     width: 150px;
    // }

    // /deep/ .envelope-input-number .el-input-number .el-input {
    //     width: 150px;
    // }
    /deep/ .leverl-checkbox .el-checkbox__label {
        padding-left: 0px;
    }

    /deep/ .leverl-checkbox .el-checkbox {
        padding: 5px 10px;
    }

    /deep/ .leverl-checkbox .el-checkbox__input {
        display: none;
    }

    /deep/ .leverl-radio .is-bordered {
        padding: 8px 10px 0 10px;
    }

    /deep/ .leverl-radio .el-radio__input {
        display: none;
    }

    /deep/ .leverl-radio .el-radio__label {
        padding-left: 0;
    }

}
</style>
